import React,{Fragment}from "react"
import houtui from "./img/后退 (2).png"
import Mycss from "./style/index.module.css"
import { Tabs, WhiteSpace } from 'antd-mobile';
import bofang from "./img/播放.png"
class Latest extends React.Component{
constructor(){
    super()
    this.state={
        zuijinbofang:"",
        gequLists:[]
    }
}
componentWillMount(){
    fetch("http://106.12.79.128:666/user/record?uid=1432372057&type=0",{
      credentials:'include'
    })
    .then(body=>body.json())
    .then(res=>{
        console.log(res)
     this.setState({
       zuijinbofang:res.allData.length,
       gequLists:res.allData
     })
    })
}
gotoLists(songid){
localStorage.setItem("pathName",this.props.location.pathname)
this.props.history.push({pathname:"/song",songid})
}
backback(){
    this.props.history.push({pathname:"/gen/My"})
}
renderContent = tab =>
(<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}>
</div>);
render(){
    const tabs = [
        { title: `歌曲(${this.state.zuijinbofang})` },
        { title: '直播' },
        { title: '视频' },
        { title: '歌单' },
        { title: '专辑' },
        { title: '电台' },
      ];
    return (
        <Fragment>
        <div className={Mycss.zuijinbofangicon}><img src={houtui} alt="" className={Mycss.backback} onClick={this.backback.bind(this)}/><div className={Mycss.playplay}>最近播放</div></div>
        <div>
        <WhiteSpace />
        <Tabs tabs={tabs} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={5} />}>
          {this.renderContent}
        </Tabs>
        <WhiteSpace />
      </div>
      <div className={Mycss.bofangquanbugequ}>
          <div><img src={bofang} alt="" className={Mycss.bofangicons}/></div>
    <div className={Mycss.abcd}>播放全部<div className={Mycss.abcde}>(共{this.state.zuijinbofang}首)</div></div>
      </div>
      <ul className={Mycss.playlists}>
        {this.state.gequLists.map((item,index)=><li key={index} className={Mycss.gequs} onClick={this.gotoLists.bind(this,item.song.privilege.id)}>
          <div className={Mycss.gequmingzi}>{item.song.name}
          <span className={Mycss.gequxinxi}>{item.song.alia.length===0?"":(`(${item.song.alia[0]})`)}</span>
           <div className={Mycss.fuxinxi}><div className={Mycss.sq}>SQ</div>
  <div className={Mycss.fuxinxi2}>
  <div className={Mycss.singer}>{item.song.ar.length===1?`${item.song.ar[0].name} -`:`${item.song.ar[0].name}/${item.song.ar[1].name} -`} {item.song.name}</div>
    </div>
           </div>
            </div></li>)}
              </ul>
        </Fragment>
    )
}
}
export default Latest